<!-- <template>
  <div style="height: 100%; width: 100%" id="TableContainer"></div>
</template>
<script setup>
import { nextTick, onMounted } from 'vue'
import XLSX from 'xlsx'
import canvasDatagrid from 'canvas-datagrid'

onMounted(() => {
  nextTick(async () => {
    /* replace with the URL of the file */
    const URL_TO_DOWNLOAD = '/测试用例.xlsx'
    const buffer = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer()

    const excel = XLSX.read(buffer)
    let sheet = excel.Sheets[excel.SheetNames[0]]
    console.log(excel.Sheets[excel.SheetNames[0]])
    console.log(XLSX.utils.sheet_to_json(sheet))
    let json = XLSX.utils.sheet_to_json(sheet)

    let grid = canvasDatagrid({
      parentNode: document.querySelector('#TableContainer'), // el 是 document 中的一个 DOM 元素
      data: json, // json 是前面解析得到 sheet 对应的数据
      // editable: false, // 表示不使用表格编辑
      // ... // 下面是对表格的一些配置项
    })
    grid.style.width = '100%' // 宽度为视口宽度
    grid.style.height = '100%' // 视口高度减去顶部的 sheet 切换按钮区高度
  })
})
</script> -->

<template>
  <div class="preivw">
    <div class="loading" v-if="loading">
      <a-spin :spinning="loading" />
    </div>
    <div
      class="content"
      :style="{ visibility: !loading ? 'visible' : 'hidden' }"
    >
      <div class="tool-bar">
        <input type="file" @change="onChange" />
      </div>
      <div class="excel">
        <vue-office-excel
          v-if="excel"
          :src="excel"
          :options="options"
          style="height: 100%"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

let loading = ref(false)
let options = ref({
  xls: false, //预览xlsx文件设为false；预览xls文件设为true
  minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
  minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
  widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
  heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
  beforeTransformData: workbookData => {
    return workbookData
  }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
  transformData: workbookData => {
    return workbookData
  }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
})
let excel = ref()

function renderedHandler() {
  loading.value = false
  console.log('渲染完成')
}
function errorHandler() {
  loading.value = false
  console.log('渲染失败')
}

function onChange(event) {
  let file = event.target.files[0] // 获取用户选择的文件
  if (file) {
    loading.value = true
    // 创建 Blob URL
    let blobURL = URL.createObjectURL(file)
    console.log('Blob URL:', blobURL)
    excel.value = blobURL
  }
}
</script>

<style scoped lang="less">
.preivw {
  position: relative;
  height: 100%;
  .loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    // .tool-bar{

    // }
    .excel {
      flex: 1;
    }
  }
}
</style>
